<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-08-28 14:34:46
 * @LastEditors: william
 * @LastEditTime: 2025-10-09 17:26:39
-->
<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="title"
    width="600px"
    style="width: 600px"
    :before-close="handleClose"
  >
    <el-form
      ref="refDialogForm"
      class="set-dialog-form"
      :label-width="language === 'en' ? '180px' : '80px'"
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="选择食材" prop="target">
            <BaseSelect
              v-model="formData.target"
              :options="props.options"
              label="调料"
              filterable
              @change="handleSelectChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="加工工艺" prop="processId">
            <BaseSelect
              v-model.number="formData.processId"
              :options="processList"
              :props="{
                label: 'name',
                value: 'id'
              }"
              label="加工工艺"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所需用量" prop="goal">
            <TextInput
              v-model.number="formData.goal"
              label="所需用量"
              verify-type="nzint"
              maxlength="10"
            >
              <template #append>
                <span>克/g</span>
              </template>
            </TextInput>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  options: {
    type: Array,
    default: () => []
  },
  row: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())
const title = computed(() => (props.type === 'add' ? '添加食材' : '修改食材'))

const refDialogForm = ref(null)
const formData = ref({
  target: '',
  ingredientName: '',
  processId: '',
  goal: ''
})
const rules = ref({
  target: g_rules.selectRule('食材'),
  processId: g_rules.selectRule('加工工艺'),
  goal: g_rules.commonInputText('所需用量')
})
const processList = ref([])

onMounted(() => {
  getDropList()
  if (props.type === 'edit') {
    g_utils.assignFormData(formData.value, props.row)
    formData.value.processId = props.row.processId * 1
    console.log('formData.value', formData.value)
  }
})

const getDropList = () => {
  g_api.foodstuff.apiProcessDropList().then(({ code, data }) => {
    if (code === '200' && data) {
      processList.value = data
    }
  })
}

const handleClose = _ => {
  dialogVisible.value = false
}

const handleSelectChange = e => {
  console.log('handleSelectChange', e)
  formData.value.ingredientName =
    props.options.find(item => item.value === e)?.label || ''
}

const handleSubmitForm = () => {
  refDialogForm.value.validate(valid => {
    console.log('formData.value', formData.value)
    if (!valid) return
    handleClose()
    emit(props.type === 'add' ? 'add' : 'update', formData.value)
  })
}
</script>

<style scoped lang="scss"></style>
